<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchGoods"  placeholder="商品类别"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="$store.dispatch('getGoodsList',{goodsName:searchGoods})">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button  type="success" @click="goodsListVisible=true">添加商品类别</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                v-loading="$store.state.load"
                :data="$store.state.goods.goodsList"
                style="width: 100%">
            <el-table-column
                    label="创建时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.goodsName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="是否推荐"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.isTrue}}
                </template>
            </el-table-column>

            <el-table-column
                    label="商品图片"
                    width="180">
                <template slot-scope="scope">
                    <a :href="scope.row.goodsPic | imgUrl" :title="scope.row.goodsName" target="_blank">
                        <img height="60px" :src="scope.row.goodsPic |imgUrl" alt="">
                    </a>
                    <!--                    <img height="100px" :src="scope.row.shopPic |imgUrl" alt="">-->
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                            size="mini"
                            type="danger"
                            @click="$store.dispatch('deleteGoods',scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pageInfo action-name="getGoodsList" :params="{goodsName:searchGoods}"></pageInfo>


        <goods-list-dia-log v-if="goodsListVisible" :goodsListVisible.sync="goodsListVisible"></goods-list-dia-log>
    </div>
</template>

<script>
    import GoodsListDiaLog from "@/components/DiaLogs/GoodsListDiaLog"
    export default {
        name: "goodsList",
        data(){
            return{
                searchGoods:"",
                goodsListVisible:false
            }
        },
        components:{
            GoodsListDiaLog
        },


    }
</script>

<style scoped>

</style>